<template>
  <div class="loading-container" v-if="visible">
    <div class="loading-backdrop" @click.stop></div>
    <div class="loading-content">
      <div class="loading-spinner">
        <div class="spinner-ring">
          <div class="ring-segment"></div>
          <div class="ring-segment"></div>
          <div class="ring-segment"></div>
          <div class="ring-segment"></div>
        </div>
        <div class="spinner-center">
          <div class="center-logo">🎫</div>
        </div>
      </div>
      <div class="loading-text">
        <h3 class="loading-title">{{ title }}</h3>
        <p class="loading-message">{{ message }}</p>
      </div>
      <div class="loading-dots">
        <span class="dot" :class="{ active: dotIndex === 0 }"></span>
        <span class="dot" :class="{ active: dotIndex === 1 }"></span>
        <span class="dot" :class="{ active: dotIndex === 2 }"></span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'

// 定义props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '加载中'
  },
  message: {
    type: String,
    default: '请稍候，正在为您准备精彩内容...'
  }
})

// 点动画索引
const dotIndex = ref(0)
let dotTimer = null

// 开始点动画
const startDotAnimation = () => {
  dotTimer = setInterval(() => {
    dotIndex.value = (dotIndex.value + 1) % 3
  }, 600)
}

// 停止点动画
const stopDotAnimation = () => {
  if (dotTimer) {
    clearInterval(dotTimer)
    dotTimer = null
  }
}

// 监听visible变化
watch(() => props.visible, (newVal) => {
  if (newVal) {
    startDotAnimation()
    // 禁止页面滚动
    document.body.style.overflow = 'hidden'
  } else {
    stopDotAnimation()
    // 恢复页面滚动
    document.body.style.overflow = 'auto'
  }
})

onMounted(() => {
  if (props.visible) {
    startDotAnimation()
  }
})

onUnmounted(() => {
  stopDotAnimation()
  // 确保恢复页面滚动
  document.body.style.overflow = 'auto'
})
</script>

<style scoped>
@import '../assets/css/loading.css';
</style> 